import React from 'react'
import { connect } from 'react-redux'
import { List, Badge } from 'antd-mobile'
const Item = List.Item
const Brief = Item.Brief

/**
 *  对charMsgs 按chat_id 进行分组,并得到每个组的lastMsg组成的数组
 * 1. 找出每个聊天的lastMsg，并用一个对象容器来保存 {chat_id:lastMsg}
 * 2. 得到所有lastMsg的数组
 * 3. 对数组进行排序，按create_time 降序
 */

function getLastMsgs(chatMsgs, userId) {
  // 1. 找出每个聊天的lastMsg，并用一个对象容器来保存 {chat_id:lastMsg}
  const lastMsgObjs = {}

  chatMsgs.forEach(msg => {
    // 对msg进行个体的统计
    if (msg.to === userId && !msg.read) {
      msg.unReadCount = 1
    } else {
      msg.unReadCount = 0
    }
    // 得到msg的聊天id
    const chatId = msg.chat_id
    // 获取已保存的当前组的lastMsg
    const lastMsg = lastMsgObjs[chatId]
    // 没有
    if (!lastMsg) {
      // 当前msg就是所在组的msg
      lastMsgObjs[chatId] = msg
    } else {
      // 有
      // 累加unReadCount  = 已经统计的 + 当前的msg
      const unReadCount = lastMsg.unReadCount + msg.unReadCount
      // 如果msg比lastMsg晚，就将msg保存为lastMsg
      if (msg.create_time > lastMsg.create_time) {
        lastMsgObjs[chatId] = msg
      }
      // 将unReadCount 保存到最新的lastMsg上
      lastMsgObjs[chatId].unReadCount = unReadCount
    }
  })

  //  2. 得到所有lastMsg的数组
  const lastMsgs = Object.values(lastMsgObjs)
  //  3. 对数组进行排序，按create_time 降序
  lastMsgs.sort(function(m1, m2) {
    // 如果结果小于0, 将m1放在前面。 如果等于0不变, 如果大于0, m2放在前面
    return m2.create_time - m1.create_time
  })
  return lastMsgs
}
// 消息容器主界面
class Message extends React.Component {
  render() {
    const { user } = this.props
    const { users, chatMsgs } = this.props.chat
    // 对charMsgs 按chat_id 进行分组
    const lastMsgs = getLastMsgs(chatMsgs, user._id)
    return (
      <List style={{ marginBottom: 50, marginTop: 50 }}>
        {lastMsgs.map(msg => {
          const targetId = msg.to === user._id ? msg.from : msg.to
          const targetUser = users[targetId]
          console.log(targetId, targetUser)
          return (
            <Item
              key={msg._id}
              extra={<Badge text={msg.unReadCount} />}
              thumb={
                targetUser.header
                  ? `http://119.3.254.20:3000/public/images_react/${targetUser.header}.png`
                  : null
              }
              arrow="horizontal"
              onClick={() => this.props.history.push(`/chat/${targetId}`)}
            >
              {msg.content}
              <Brief>{targetUser.username}</Brief>
            </Item>
          )
        })}
      </List>
    )
  }
}
export default connect(
  state => ({ user: state.user, chat: state.Chat }),
  {}
)(Message)
